<template>
    <div class="content-column first-column">
        <div class="column-panel panel-1-1">
            <div class="panel-title">专项完成情况</div>
            <div class="data-group">
                <div class="data-item">
                    <div class="data-value">{{ props.data.finishNum }}</div>
                    <div class="data-label">累计完成</div>
                </div>
                <div class="data-item">
                    <div class="data-value">{{ props.data.unfinishNum }}</div>
                    <div class="data-label">正在进行</div>
                </div>
                <div class="data-item">
                    <div class="data-value">{{ props.data.waitNum }}</div>
                    <div class="data-label">等待开始</div>
                </div>
            </div>
            <div class="panel-foot"></div>
        </div>
        <div class="column-panel panel-1-2">
            <div class="panel-title">专项类型</div>
            <div ref="doughnutChart" class="panel-content chart-container"></div>
            <div class="panel-foot"></div>
        </div>
        <div class="column-panel panel-1-3">
            <div class="panel-title">进行中专项</div>
            <div ref="scrollContainer" class="panel-content scroll-container" @mouseenter="stopScroll"
                @mouseleave="startScroll" @wheel.prevent="handleWheel">
                <div ref="scrollContent" class="scroll-content">
                    <table class="scroll-table">
                        <tbody>
                            <tr v-for="(item, index) in getOngoingProjects()" :key="index">
                                <td width="70%">{{ item.name }}</td>
                                <td width="30%">{{ item.status }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel-foot"></div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watchEffect, onUnmounted, computed } from 'vue';
import * as echarts from 'echarts';
import { convertDict } from '@/utils/Misc';
const props = defineProps({
    data: {
        type: Object,
        required: true
    }
});
const doughnutChart = ref(null);
let chartInstance = null;
const scrollContainer = ref(null);
const scrollContent = ref(null);
let scrollInterval = null;
let scrollTop = 0;
let isScrolling = false;
const getOngoingProjects = () => {
    let ongoingProjects = []
    props.data.planBoardViewList.map(item => {
        ongoingProjects.push({
            name: item.name,
            status: convertDict("专项计划状态", "v2l", item.status),
        })
    })
    return ongoingProjects
}
const getDoughnutChartData = () => {
    let doughnutChartData = []
    props.data.planTypeNumList.map((item) => {
        doughnutChartData.push({
            name: convertDict("专项计划类型", "v2l", item.type),
            value: item.num
        })
    })
    return doughnutChartData
};
const initChart = () => {
    if (chartInstance) {
        chartInstance.dispose();
    }
    chartInstance = echarts.init(doughnutChart.value);
    const rawData = getDoughnutChartData();
    const legendNames = ['事故事件', '优化建议', '历史故障'];
    const completeData = legendNames.map(name => {
        const found = rawData.find(item => item.name === name);
        if (found) {
            return found;
        } else {
            return { value: 0, name: name };
        }
    });
    const option = {
        color: ['#36cbcb', '#ff7d00', '#ff4d4f', '#722ed1'],
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            textStyle: {
                color: '#ccc'
            },
            data: ['事故事件', '优化建议', '历史故障']
        },
        series: [
            {
                name: '专项类型',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['60%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: 'rgba(10, 30, 60, 0.5)',
                    borderWidth: 2
                },
                labelLine: {
                    show: true,
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                label: {
                    show: false,
                    position: 'center',
                    color: '#fff',
                    formatter: '{c} ({d}%)'
                },
                data: completeData
            }
        ]
    };
    chartInstance.setOption(option);
};
const handleWheel = (e) => {
    stopScroll();
    const contentHeight = scrollContent.value.offsetHeight;
    const containerHeight = scrollContainer.value.offsetHeight;
    const maxScrollTop = Math.max(0, contentHeight - containerHeight);
    const scrollStep = e.deltaY > 0 ? 20 : -20;
    scrollTop = Math.max(0, Math.min(maxScrollTop, scrollTop + scrollStep));
    scrollContent.value.style.transform = `translateY(-${scrollTop}px)`;
};
const startScroll = () => {
    if (!isScrolling) {
        isScrolling = true;
        scrollInterval = setInterval(() => {
            const contentHeight = scrollContent.value.offsetHeight;
            const containerHeight = scrollContainer.value.offsetHeight;
            const maxScrollTop = Math.max(0, contentHeight - containerHeight);
            if (contentHeight <= containerHeight) {
                clearInterval(scrollInterval);
                return;
            }
            scrollTop += 1;
            if (scrollTop >= maxScrollTop) {
                scrollTop = 0;
                scrollContent.value.style.transition = 'none';
                scrollContent.value.style.transform = `translateY(0)`;
                setTimeout(() => {
                    scrollContent.value.style.transition = 'transform 0.1s linear';
                }, 50);
            }
            scrollContent.value.style.transform = `translateY(-${scrollTop}px)`;
        }, 50);
    }
};
const stopScroll = () => {
    if (isScrolling) {
        isScrolling = false;
        clearInterval(scrollInterval);
    }
};
onMounted(() => {
    if (doughnutChart.value) {
        initChart();
        window.addEventListener('resize', () => {
            chartInstance?.resize();
        });
    }
    if (scrollContainer.value && scrollContent.value) {
        startScroll();
    }
});
onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    clearInterval(scrollInterval);
    scrollInterval = null;
    isScrolling = false;
});
watchEffect((onCleanup) => {
    onCleanup(() => {
        if (chartInstance) {
            chartInstance.dispose();
            chartInstance = null;
        }
        clearInterval(scrollInterval);
    });
});
</script>
<style scoped>
.content-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 15px;
}

.first-column {
    flex: 1;
}

.column-panel {
    background-color: rgba(10, 30, 60, 0.2);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-image: url('/dashboard/images/line.png');
    position: relative;
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.column-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.column-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.column-panel .panel-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
}

.column-panel .panel-foot::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.column-panel .panel-foot::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.panel-title {
    font-size: 1rem;
    padding: 0 0 4px 0;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
    color: white;
}

.panel-content {
    flex: 1;
    overflow: hidden;
    color: #fff;
}

.chart-container {
    width: 100%;
    height: 100%;
    min-height: 200px;
    margin-top: 30px;
}

.panel-1-1 {
    flex: 1;
}

.data-group {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
}

.data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.data-value {
    font-size: 2rem;
    color: #00bfff;
    font-weight: bold;
    margin-bottom: 5px;
}

.data-label {
    font-size: 0.9rem;
    color: #ccc;
}

.panel-1-2 {
    flex: 2;
}

.panel-1-3 {
    flex: 1.5;
}

.scroll-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.1s linear;
    will-change: transform;
}

.scroll-table {
    width: 100%;
    border-collapse: collapse;
}

.scroll-table th,
.scroll-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.scroll-table th {
    background-color: rgba(10, 30, 60, 0.3);
}

.scroll-table tr:nth-child(even) {
    background-color: rgba(10, 30, 60, 0.2);
}

@media (max-width: 768px) {
    .first-column {
        width: 100%;
        height: auto;
    }

    .panel-title {
        font-size: 1rem;
    }

    .chart-container {
        min-height: 150px;
    }
}
</style>